Skip to content

#issue 977 feat: add global keyboard shortcut Alt+T / Option+T (in Mac) to toggle theme …#985

Open
coutKaustubh wants to merge 4 commits into
Priyanshu-byte-coder:mainfrom
coutKaustubh:Shortcut-Toggle-for-theme
Open

#issue 977 feat: add global keyboard shortcut Alt+T / Option+T (in Mac) to toggle theme …#985
coutKaustubh wants to merge 4 commits into
Priyanshu-byte-coder:mainfrom
coutKaustubh:Shortcut-Toggle-for-theme

Conversation

@coutKaustubh
Copy link
Copy Markdown

Description

This pull request adds a global keyboard shortcut (Alt + T on Windows/Linux and Option + T on macOS) to toggle the dark/light theme across all application pages (including the dashboard, settings, and public profile pages). It also updates the Shortcuts panel to dynamically reflect the correct keys depending on the client OS.

Problem

Previously, the theme toggle shortcut triggered on the letter T alone (prone to accidental triggers) and was only active on the Dashboard page because the listener was coupled with the Dashboard Header component. On the settings or public profile pages, it did not work. Additionally, the shortcuts overlay listed the key as "T".

Solution

  1. Created GlobalKeyboardShortcuts.tsx: A new root-level, headless keyboard shortcut listener component mounted inside Providers.tsx. It handles the global key combinations and includes screen-reader accessibility announcements (aria-live="polite").
  2. OS Auto-Detection: Integrated dynamic platform detection in ShortcutsModal.tsx using navigator.userAgent to display Option + T on Mac platforms and Alt + T on other operating systems.
  3. Decoupled UI & Logic: Simplified KeyboardShortcuts.tsx into a lightweight trigger button that dispatches a custom window event (openShortcuts) to open the global shortcuts modal.
  4. Input Avoidance: Guaranteed that shortcut hotkeys do not fire when a user has focus inside an input, textarea, select, or contenteditable container.

Acceptance Criteria Checklist

  • Alt+T / Option+T toggles theme globally.
  • Works seamlessly on the dashboard, settings, and public profile pages.
  • Does not fire when the user is typing in an input, textarea, select, or contenteditable.
  • Shortcut listed in the keyboard shortcuts overlay panel as Option + T (on Mac) or Alt + T (on Windows/Linux).

How to Test

  1. Press Alt+T (or Option+T on Mac) on the dashboard, settings page, and public profile page to verify the theme toggles globally.
  2. Select any input or textarea on the settings page and type words with 't' and 'Alt+t'. Confirm the theme does not toggle while typing.
  3. Click the "Shortcuts" button or press ? on the keyboard to open the Shortcuts modal.
  4. Check that the label for "Toggle theme" dynamically displays Option + T on macOS devices and Alt + T on Windows/Linux devices.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 24, 2026

@coutKaustubh is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature labels May 24, 2026
@github-actions
Copy link
Copy Markdown

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

Copy link
Copy Markdown

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

  • Make sure CI is passing (type-check + lint)
  • Double-check the PR description is filled out and the issue is linked
  • Feel free to ask questions in Discussions if you need help

If you find DevTrack useful, a ⭐ star on the repo is always appreciated — it helps the project grow and attract more contributors!

@coutKaustubh
Copy link
Copy Markdown
Author

I have solved the issue .. Please look towards it and tell me if any error @Priyanshu-byte-coder

@coutKaustubh coutKaustubh changed the title feat: add global keyboard shortcut Alt+T / Option+T (in Mac) to toggle theme … #issue 977 feat: add global keyboard shortcut Alt+T / Option+T (in Mac) to toggle theme … May 24, 2026
@Priyanshu-byte-coder Priyanshu-byte-coder added the gssoc:approved GSSoC: PR approved for scoring label May 24, 2026
Copy link
Copy Markdown
Owner

@Priyanshu-byte-coder Priyanshu-byte-coder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great feature! One thing to clean up before merge:

package-lock.json has 22k lines of unrelated changes. Please regenerate it by running npm install on a clean checkout of latest main and commit only the lockfile diff related to any packages your PR actually adds.

@Priyanshu-byte-coder Priyanshu-byte-coder added the level:intermediate GSSoC: Intermediate difficulty (35 pts) label May 24, 2026
@coutKaustubh
Copy link
Copy Markdown
Author

Thanks for pointing that out! I've cleaned up the unrelated package-lock.json changes and pushed the updated commits.
Please do check it out @Priyanshu-byte-coder

@Priyanshu-byte-coder
Copy link
Copy Markdown
Owner

Hi! This PR now has a merge conflict (on KeyboardShortcuts.tsx / ShortcutsModal.tsx) after the shortcut hover flicker fix (#983) was just merged. Please rebase onto the latest main and resolve conflicts — the Alt+T shortcut is approved and we want to merge it!

@coutKaustubh coutKaustubh force-pushed the Shortcut-Toggle-for-theme branch from 6920f21 to 66f8d41 Compare May 25, 2026 12:02
@coutKaustubh
Copy link
Copy Markdown
Author

I have resolved merge conflicts , Kindly go merge it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc:approved GSSoC: PR approved for scoring gssoc26 GSSoC 2026 contribution level:intermediate GSSoC: Intermediate difficulty (35 pts) type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants